<template>
    <div>
        <h4 class="lighter">
            <i class="ace-icon fa fa-hand-o-right icon-animated-hand-pointer blue"></i>
            <router-link to="/business/course" class="pink"> {{course.name}} </router-link>
        </h4>
        <file   v-bind:suffixs="['jpg','jpeg','png','mp4']"
                v-bind:input-id="'content-file-upload'"
                v-bind:text="'上传文件'" 
                v-bind:use="FILE_USE.COURSE.key"
                v-bind:after-upload="afterUploadContentFile">
        </file>
        <br>
        <table id="file-table" class="table table-bordered table-hover">
            <thead>
                <tr>
                    <th>名称</th>
                    <th>地址</th>
                    <th>大小</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(f,i) in files" v-bind:key="f.id">
                    <td>{{f.name}}</td>
                    <td>{{f.url}}</td>
                    <td>{{f.size | formatFileSize}}</td>
                    <td>
                        <button v-on:click="delFile(f)" class="btn btn-white btn-default btn-round">
                            <i class="ace-icon fa fa-times red2"></i>
                            删除
                        </button>
                    </td>
                </tr>
            </tbody>
        </table>
        <form class="form-horizontal">
            <div class="form-group">
                <div class="col-lg-12">
                    {{saveContentLabel}} 
                </div>
            </div>
            <div class="form-group">
                <div class="col-lg-12">
                    <div id="content">
                    </div>
                </div>
            </div>

        </form>
    
    <div class="modal-footer">
        
        <!-- 点击保存按钮 不会关闭模态框 这个保存应该与自动保存区别开来,点击这个保存后关闭模态框 -->
        <button v-on:click="saveContent()" type="button" class="btn btn-primary">保存</button>
        &nbsp;
        
        <router-link to="/business/course" class="pink"> 
            <i class="ace-icon fa fa-times"></i>
            返回课程
        </router-link>
        
    </div>
    </div>
</template>

<script>
//course 中引用 content.vue 
//content 中 引用file.vue上传组件 不是文件管理哦
import File from '../../components/file.vue'
export default {
    components: {File},
    name: 'course-content-file',
    data: function() {
      return {
        course: {},
        FILE_USE: FILE_USE,
        saveContentLabel: "",
        files: [],
        saveContentInterval: {},
      }
    },
    mounted: function() {
      let _this = this;

      let course = SessionStorage.get(SESSION_KEY_COURSE) || {};
      if (Tool.isEmpty(course)) {
        _this.$router.push("/welcome");
      }
      _this.course = course;

      _this.init();

      // sidebar激活样式方法一
      this.$parent.activeSidebar("business-course-sidebar");

    },
    destroyed: function() {
      let _this = this;
      console.log("组件销毁");
      clearInterval(_this.saveContentInterval);
    },
    methods:{
      /**
       * 打开内容编辑框
       */
       init() {
        let _this = this;
        let course = _this.course;
        let id = course.id;
        $("#content").summernote({
          focus: true,
          height: 300
        });

        // 先清空历史文本
        $("#content").summernote('code', '');
        _this.saveContentLabel = "";

        // 加载内容文件列表
        _this.listContentFiles();

        Loading.show();
        _this.$ajax.get('/business/admin/course/find-content/' + id).then((response)=>{
          Loading.hide();
          let resp = response.data;
          if (resp.success) {
            if (resp.content) {
              $("#content").summernote('code', resp.content.content);
            }
            // 定时自动保存
            _this.saveContentInterval = setInterval(function() {
              _this.saveContent();
            }, 5000);
          } else {
            Toast.warning(resp.message);
          }
        });
      },//end method init 
       /**
       * 保存内容
       */
       saveContent () {
        let _this = this;
        let content = $("#content").summernote("code");
        _this.$ajax.post('/business/admin/course/save-content', {
          id: _this.course.id,
          content: content
        }).then((response)=>{
          Loading.hide();
          let resp = response.data;
          if (resp.success) {
            // Toast.success("内容保存成功");
            // let now = Tool.dateFormat("yyyy-MM-dd hh:mm:ss");
            let now = Tool.dateFormat("mm:ss");
            _this.saveContentLabel = "最后保存时间：" + now;
          } else {
            Toast.warning(resp.message);
          }
        });
      },
      /**
       * 加载内容文件列表
       */
       listContentFiles() {
        let _this = this;
        _this.$ajax.get('/business/admin/course-content-file/list/' + _this.course.id).then((response)=>{
          let resp = response.data;
          if (resp.success) {
            _this.files = resp.content;
          }
        });
      },//end method listContentFile
       /**
       * 上传内容文件后，保存内容文件记录
       */
       afterUploadContentFile(response) {
        let _this = this;
        console.log("开始保存文件记录");
        let file = response.content;
        file.courseId = _this.course.id;
        file.url = file.path;
        _this.$ajax.post('/business/admin/course-content-file/save', file).then((response)=>{
          let resp = response.data;
          if (resp.success) {
            Toast.success("上传文件成功");
            _this.files.push(resp.content);
          }
        });
      },//end method afterUploadContentFile
      /**
       * 删除内容文件
       */
       delFile(f) {
        let _this = this;
        Confirm.show("删除课程后不可恢复，确认删除？", function () {
          _this.$ajax.delete('/business/admin/course-content-file/delete/' + f.id).then((response)=>{
            let resp = response.data;
            if (resp.success) {
              Toast.success("删除文件成功");
              Tool.removeObj(_this.files, f);
            }
          });
        });
      },//end method delFile
    }//methods     
}//end export
</script>